{% extends "core/base.html" %}
{% load staticfiles %}

{% block title %}{{ block.super }} - {{ package }}{% endblock %}

{% block extra-css %}
<link href="{% static 'css/dense.css' %}" rel="stylesheet" media="screen">
{% endblock %}

{% block extra-head %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{% url 'dtracker-package-rss-news-feed' package.name %}">
{% endblock %}

{% block page-header-title %}
    <div>
    <h1>{{ package }}</h1>
    {% if package.short_description %}
    <h5>{{ package.short_description }}</h5>
    {% endif %}
    </div>
{% endblock %}

{% block page-header-right %}
    <div class="m-b-1">
    {% include 'core/package-search-form.html' %}
    </div>
    {% include 'accounts/user-widget.html' with logout_redirect=request.path %}

    {% if request.user.is_authenticated %}
	<div class="btn-group" role="group" style="margin-left: 10px;{% if is_subscribed %}display: none;{% endif %}">
	    {% if request.user.emails.all|length == 1 %}
	    <form class="unstyled-form" action="{% url 'dtracker-api-accounts-subscribe' %}" method="POST">{% csrf_token %}
		<input type="hidden" name="package" value="{{ package }}">
		<input type="hidden" name="email" value="{{ request.user.emails.all.0 }}">
	    {% else %}
	    <a href="{% url 'dtracker-accounts-choose-email' %}?package={{ package }}">
	    {% endif %}

	  <button class="btn btn-default" id='subscribe-button' data-package="{{ package }}" data-get-emails="{% url 'dtracker-api-accounts-emails' %}" data-url="{% url 'dtracker-api-accounts-subscribe' %}">Subscribe</button>

	    {% if request.user.emails.all|length == 1 %}
	    </form>
	    {% else %}
	    </a>
	    {% endif %}
	</div>

	<form class="unstyled-form form-inline" action="{% url 'dtracker-api-accounts-unsubscribe' %}" method="POST">{% csrf_token %}
	    <input type="hidden" name="package" value="{{ package }}">
	    <div class="btn-group" role="group" style="{% if not is_subscribed %}display: none;{% endif %}">
		<button class="btn btn-danger" id='unsubscribe-button' data-url="{% url 'dtracker-api-accounts-unsubscribe' %}" data-package="{{ package }}">Unsubscribe</button>
		<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		    <span class="sr-only">Toggle Dropdown</span>
		</button>
		<div class="dropdown-menu">
		    <a href="{% url 'dtracker-accounts-subscriptions' %}">Subscription details</a>
		</div>
	    </div>
	</form>
    {% else %}
	{# When the user is not authenticated, the subscribe button leads to the log in page instead #}
	<div class="btn-group" role="group" style="margin-left: 10px;{% if is_subscribed %}display: none;{% endif %}">
	  <a href="{% url 'dtracker-accounts-login' %}" id='subscribe-not-logged-in-button' class="btn btn-primary">Subscribe</a>
	</div>
    {% endif %}

{% endblock %}

{% block page-content %}
{# A hidden modal which would display a list of user emails allowing him to choose which one to subscribe to the package #}
{% spaceless %}
<div id="choose-email-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Choose email to subscribe with</h3>
  </div>
  <div class="modal-body">
    {# The email selection markup goes here #}
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" id="cancel-choose-email" data-dismiss="modal" aria-hidden="true">Cancel</button>
  </div>
  </div>
  </div>
</div>
{% endspaceless %}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" id="dtracker-package-left">
            {% for panel in panels.left %}
            {% if panel.template_name %}
                {% include panel.template_name %}
            {% else %}
                {{ panel.html_output }}
            {% endif %}
            {% endfor %}
        </div>
        <div class="col-md-6 col-xl-7" id="dtracker-package-center">
            {% for panel in panels.center %}
            {% if panel.template_name %}
                {% include panel.template_name %}
            {% else %}
                {{ panel.html_output }}
            {% endif %}
            {% endfor %}
        </div>
        <div class="col-md-3 col-xl-2" id="dtracker-package-right">
            {% for panel in panels.right %}
            {% if panel.template_name %}
                {% include panel.template_name %}
            {% else %}
                {{ panel.html_output }}
            {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
